<template>
  <div class="topicblock-root" :class="{zoomin}">
    <DecoTitle label="当前人员涉及的主题" type="round" class="title"></DecoTitle>
    <FullBtn class="zoombtn"
      :zoomin="zoomin" 
      @zoomin="$emit('zoomin')"
      @zoomout="$emit('zoomout')">
    </FullBtn>
    <div class="wrap innerscr">
      <Percent class="percent" v-for="item in percent" :label="item.label" :num="item.num"></Percent>
    </div>
  </div>
</template>

<script>
import DecoTitle from '../Topic/DecoTitle'
import Percent from './Percent'
import FullBtn from '../common/FullBtn.vue'
export default {
  name: 'topicblock',
  components: {DecoTitle, Percent, FullBtn},
  props: ['zoomin'],
  data(){
    return {
      percent: [
        {label: "中国崛起", num: 86},
        {label: "太平洋军演", num: 42},
        {label: "南海纷争", num: 56},
        {label: "朝鲜核威胁", num: 33},
        {label: "美国大选", num: 66}
      ]
    }
  },
  mounted(){
    let pcs = this.percent.slice(0)
    for(let i = 0; i < 5; i++){
      this.percent = this.percent.concat(pcs)
    }
  }
}
</script>

<style lang="stylus" scoped>
.topicblock-root
  padding 18px
  >.wrap
    padding 0 60px
    margin-top 22px
    height calc(100% - 55px)
    overflow auto
    >.percent
      margin-bottom 9px
      &:last-child
        margin-bottom 0

.zoomin
  padding-right 100px
  >.title
    display none
  >.wrap
    padding 0 200px

.zoombtn
  position absolute
  top 20px
  right 20px
</style>